<template>
  <view class="fished">
    <view class="box-l">
      <view class="author">
        <image
          class="avatar"
          src="https://img2.baidu.com/it/u=672094867,3617169437&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=521"
          mode="scaleToFill"
        />
        <view class="name">
          <view>动感小新</view>
          <view>
            {{ text }}
          </view>
          <image
            class="content"
            :src="fishedImg"
            mode="scaleToFill"
            @click="previewImg"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { thirdApi } from '@/request/thirdApi.js'

const fishedImg = ref('')
const text = ref('')
onMounted(() => {
  getFished()
  getJokeApi()
})
async function getFished() {
  const res = await thirdApi.getCalendar()
  fishedImg.value = res.data
}
async function getJokeApi() {
  const res = await thirdApi.getJoke()
  text.value = res
}

// 预览图片
function previewImg() {
  const imgeList = [fishedImg.value]
  uni.previewImage({
    urls: imgeList,
    current: fishedImg.value
  })
}
</script>
<style lang="scss" scoped>
.fished {
  width: 100%;
  height: 100vh;
  padding: 16rpx 28rpx;
  box-sizing: border-box;
  .box-l {
    height: 100%;
    .author {
      display: flex;
      height: 86%;
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
      .name {
        flex: 1;
        margin-left: 10rpx;
        view:nth-child(1) {
          font-size: 30rpx;
          color: #fc8914;
          font-weight: bold;
        }
        .content {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
